<template>
    <div class="wrapper">
        <scroller>
            <div>
                <div>
                    <!--<slider class="slider" interval="3000" auto-play="false" :index="sliderIndex" @change="sliderChangeEvent">
                        <div class="frame" v-for="(img, idx) in item.smallImages">
                            <image class="image" resize="cover" :src="img"></image>
                        </div>
                    </slider>
                    <div class="slider-point">
                        <text  v-for="(img, idx) in item.smallImages"
                               :class="['slider-point-item', sliderIndex===idx?'slider-point-active':'']"
                                @click="sliderPointClickEvent(idx)">
                            {{idx}}
                        </text>
                    </div>-->
                    <image class="image" resize="cover" :src="item.pictUrl"></image>
                </div>
                <div style="background-color: #FFFFFF; margin-top: 20px; padding: 20px;">
                    <div style="margin-top: 20px;">
                        <text class="product-title">{{item.title}}</text>
                    </div>
                    <div class="flex-row" style="margin-bottom: 15px;">
                        <div class="flex-row">
                            <!--<text class="label">现价 </text><text class="final_price">{{item.zkFinalPrice}} </text>-->
                        </div>
                        <text class="volume label">已售{{item.volume}}件</text>
                    </div>
                    <div class="flex-row">
                        <div class="flex-row">
                            <text class="label"><!--券后价--> </text><text class="qhPrice">¥{{item.reservePrice}}</text>
                        </div>
                        <div class="flex-row ">
                            <div style="margin-right: 20px; margin-bottom: 4px;">
                                <image v-if="item.userType == '天猫'" src="bmlocal://assets/tmall.png" style="width: 36px; height: 36px;"></image>
                                <image v-if="item.userType == '淘宝'" src="bmlocal://assets/taobao.png" style="width: 36px; height: 36px;"></image>
                            </div>
                            <div class="flex-row quan-ctt">
                                <text v-if="item.couponLeft > 0" class="quan-price">{{item.couponPrice}}</text>
                                <text v-else class="quan-price">已抢完</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <text class="lingquan-btn" @click="toTaobaoUri(item.ulandUrl)">领券</text>
                    <!--<text class="lingquan-btn" @click="toTaobao(item.numIid)">领券</text>-->
                </div>
            </div>
            <div v-if="recommends.length > 0">
                <div class="similar">
                    <text class="similar1">相似商品</text>
                    <image src="bmlocal://assets/section-title-bg.png" class="section-title-bg"></image>
                </div>

                <div class="product-ctt">
                    <div class="product-item" v-for="(item,idx) in recommends" :key="idx">
                        <div class="product-item-a" @click="switchItem(item.numIid, {navTitle: item.title})">
                            <div>
                                <image :src="item.pictUrl" style="width: 200px; height: 200px;"></image>
                            </div>
                            <div style="width: 530px; padding: 20px;">
                                <text class="product-title">{{item.title}}</text>
                                <div class="flex-row" style="margin-bottom: 15px;">
                                    <div class="flex-row">
                                        <text class="label">现价 </text><text class="final_price">{{item.zkFinalPrice}} </text>
                                    </div>
                                    <text class="volume label" v-if="item.volume">已售{{item.volume}}件</text>
                                </div>
                                <div class="flex-row">
                                    <div class="flex-row">
                                        <text class="label">券后价 </text><text v-if="item.couponInfo" class="qhPrice">¥{{item.qhPrice}}</text>
                                    </div>
                                    <div class="flex-row ">
                                        <div style="margin-right: 20px; margin-bottom: 4px;">
                                            <image v-if="item.userType == 1" src="bmlocal://assets/tmall.png" style="width: 36px; height: 36px;"></image>
                                            <image v-if="item.userType == 0" src="bmlocal://assets/taobao.png" style="width: 36px; height: 36px;"></image>
                                        </div>
                                        <div class="flex-row quan-ctt" v-if="item.quan > 0">
                                            <text class="quan-label">券</text>
                                            <text class="quan-price">{{item.quan}}元</text>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
    import yhq from '../../config/yhq';
    const taobao = weex.requireModule('taobao');
    export default {
        data() {
            return {
                item:{},
                recommends: [],
                id: '',
                sliderIndex: 0
            }
        },
        created() {
            let self = this;
            this.$router.getParams().then(resData => {
                self.item = resData;
                console.log(self.item)
                self.id = resData.numIid;
                // self.loadItem();
                // self.loadRecommend();
            })
        },
        methods: {
            loadItem(){
                let self = this;
                this.$fetch({
                    method: 'GET',
                    url: `${yhq.serverUrl}/yhq/detail/${self.id}`
                }).then(resp => {
                    console.log(resp)
                    if(resp.code === 200){
                        self.item = resp.res;
                        self.$notice.toast(self.item.pictUrl);
                        // self.item.smallImages = [self.item.pictUrl]
                        self.$navigator.setNavigationInfo({
                            title: self.item.title,
                            navShow: true
                        });
                    } else {
                        self.$notice.toast('没有获取到数据');
                    }
                    // self.loadRecommend();
                }, err => {
                    console.log(error)
                })
            },
            loadRecommend(){
                let self = this;
                this.$fetch({
                    method: 'GET',
                    url: `${yhq.serverUrl}/yhq/item/recommend/${self.id}`
                }).then(resp => {
                    console.log(resp)
                    if(resp.code === 200){
                        self.recommends = resp.res.list;
                    } else {
                        self.$notice.toast('没有获取到数据');
                    }
                }, err => {
                    console.log(error)
                })
            },
            sliderChangeEvent(evt){
                this.sliderIndex = evt.index;
            },
            sliderPointClickEvent(idx){
                this.sliderIndex = idx;
            },
            switchItem(id){
                this.id = id;
                console.log(this.id)
                this.loadItem();
            },
            jump(url, obj){
                this.$router.open({
                    name: 'yhq.detail',
                    params: obj,
                    navTitle: obj.title
                })
            },
            jumpWeb(url){
                this.$router.toWebView({url: url})
            },
            toTaobao(id){
                taobao.jumpDetail(id)
            },
            toTaobaoUri(uri){
                taobao.jumpURI(uri)
            }
        }
    }
</script>

<style scoped>
    .iconfont{
        font-family: iconfont;
    }
    .flex-row{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .image {
        width: 750px;
        height: 750px;
    }
    .slider {
        width: 750px;
        height: 750px;
    }
    .frame {
        width: 750px;
        height: 750px;
        position: relative;
    }
    .slider-point{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: -50px;
    }
    .slider-point-item{
        width: 30px;
        height: 30px;
        border-radius: 30px;
        background-color: #b9b9b9;
        border-width: 2px;
        border-color: #ffffff;
        margin-right: 10px;
        margin-left: 10px;
    }
    .slider-point-active{
        background-color: #ff6600;
        border-color: #ffffff;
        color: #ffffff;
    }
    .lingquan-btn{
        background-color: #ff6600;
        color: #FFFFFF;
        padding-top: 30px;
        padding-bottom: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 30px;
    }
    .similar{
        background-color: #FFFFFF;
        color: #ff6600;
        padding-top: 30px;
        padding-bottom: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-color: #e9e9e9;
    }
    .section-title-bg{
        width: 343px;
        height: 21px;
        /*margin-left: 203px;*/
        margin-top: -30px;
        /*margin-bottom: 60px;*/
    }
    .product-ctt{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        justify-items: flex-start;
    }
    .product-item{
        /*width: 335px;*/
        margin-left: 10px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }
    .product-item-a{
        flex-direction: row;
    }
    .product-title{
        font-size: 28px;
        height: 72px;
        margin-bottom: 15px;
    }
    .final_price{
        font-size: 24px;
        color: #7d7d7d;
        text-decoration: line-through;
    }
    .quan-ctt{
        border-color: #ff6600;
        border-width: 1px;
        border-style: solid;
        background-color: #ffffff;
        color: #ff6600;
        border-radius: 8px;
    }
    .quan-label{
        background-color: #ff6600;
        color: #ffffff;
        font-size: 24px;
        padding: 5px;
    }
    .quan-price{
        font-size: 22px;
        padding: 6px;
        background-color: #ffffff;
        color: #ff6600;
        margin-left: 10px;
        margin-right: 10px;
    }
    .qhPrice{
        color: #ff6600;
        font-size: 36px;
    }
    .label{
        color: #7d7d7d;
        font-size: 24px;
    }
    .volume{
        font-size: 24px;
    }
    .mall{
        width: 58px;
        height: 58px;
    }
</style>
